<template>
  <div style="">
    <div class="lineChart" style="position: relative" :id="id"></div>
    <div
      style="font-size: 14px;width: 96%;;color: #fff;position: absolute;top: 65%;display: flex;justify-content: space-around;">
      <div v-for="item in xdata">{{
      item }}</div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  props: ["id", "barData"],
  data() {
    return {
      xdata: ['5分钟', '10分钟', '15分钟', '20分钟', '25分钟', '30分钟', '35分钟', '40分钟'],
      // barData: [[1, 5], [2, 10], [3, 5], [2, 10], [1, 8], [3, 2]],
      // 1：教师讲授时间，2：师生互动时间，3：学生学习时间
      title: ['教师讲授时间', '师生互动时间', '学生学习时间'],
      colors: ['#0ED489', '#0E9ED4', '#0E44D4'],
    };
  },
  methods: {
    draw_bar() {
      let charts = echarts.init(document.getElementById(this.id));
      let series = [];
      let color = [];
      let newArray = []
      if (this.barData)
        this.barData.map((item) => {
          const index = item[0] - 1;
          newArray.push({
            title: this.title[index],
            color: this.colors[index],
            value: item[1]
          });
        })
      newArray.forEach((item2, index2) => {
        color.push(item2.color)
        series.push({
          name: item2.title,
          type: 'bar',
          stack: "1",
          barWidth: 60,
          data: [item2.value],
        })
      });
      charts.setOption({
        grid: {
          top: 30,
          width: '100%',
          left: 0,
        },
        title: {
          text: '课程分配时间图',
          top: 10,
          left: 0,
          textStyle: {
            fontWeight: 'normal',
            fontSize: 14,
            color: '#fff'
          },
        },
        legend: {
          top: 10,
          right: 0,
          icon: 'roundRect',
          itemWidth: 30,
          itemHeight: 15,
          itemGap: 15,
          textStyle: {
            fontFamily: 'MicrosoftYaHei',
            fontSize: 14,
            color: 'rgba(255, 255, 255, 1)'
          },
          selectedMode: false,
          data: this.title
        },
        xAxis: {
          show: false
        },
        yAxis: {
          data: [""],
          show: false
        },
        color: color,
        series: series,
      });
      window.addEventListener("resize", function() {
        charts.resize();
      });
    },
  },
  mounted() {
    this.$nextTick(function() {
      this.draw_bar();
    });
  },
};
</script>

<style scoped>
.lineChart {
  width: 100%;
  height: 100%;
  margin: 0 20px;
  /* height: 100px; */
  /* height: 275px; */
  /* width: 300px; */
}
</style>
